<template>
    <el-container>
        <el-header>
                <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#3D3D3D"
                text-color="#fff" active-text-color="#ffd04b">
                            <el-submenu index="2" class="flr">
                                <template slot="title">{{sysuser}}</template>
                                <el-menu-item index="2-1"> <i class="fa fa-user"></i> 个人信息</el-menu-item>
                                <el-menu-item index="2-2" @click="out"> <i class="fa fa-power-off"></i> 退出</el-menu-item>
                            </el-submenu>
                        <el-select class="flr lit" v-model="form.region" placeholder="请选择店铺" :disabled="sel" @change="saveshopid">
                            <el-option v-for="item in items" :label="item.shopName" :key="item.shopId" :value="item.shopId"></el-option>
                        </el-select>
                        <span class="ass">当前店铺:</span>
                        <!-- <el-button @click="menuchange">111</el-button> -->
                        <i class="fa fa-bars fa-2x iconclass" @click="menuchange" aria-hidden="true"></i>
                </el-menu>
        </el-header>
        <el-container class="cebianlan">
            <menust :isCollapse="Collapse"></menust>
            <el-container>
                <el-main>
					<!-- <transition name="el-fade-in" appear> -->
                        <keep-alive>
                            <router-view ></router-view>
                        </keep-alive>
                    <!-- </transition> -->
                </el-main>
                <el-footer>A Vue2 and ElementUI Project Copyright © 2017 biaoke.</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>
<script>
import 'font-awesome/css/font-awesome.css'
import menust from 'components/Menu/Menu'
import axios from 'axios'
import Vue from 'vue'
import qs from 'qs'
import lockr from 'lockr'
    export default {
        data(){
            return{
                form:{
                    region: -1,
                },
                items:[{
                    shopName:'全部店铺',
                    shopId:-1
                }],
                sel:!this.$store.state.shiro,
                sysuser:'',
                Collapse:false
            }
        },
        components: {
            menust
		},
        mounted(){
            this.checkdata()
        },
        methods:{
            menuchange(){
                this.Collapse=!this.Collapse
            },
            checkdata(){//超管和店长获取不同的管理权限
                var _this=this
                if(this.$store.state.shiro){
                    if(this.$store.state.shiroitem.admin){
                        this.sysuser='您好,超级管理员'
                    }else if(this.$store.state.shiroitem.kefu){
                        this.sysuser='您好,客服'
                    }else if(this.$store.state.shiroitem.caiwu){
                        this.sysuser='您好,财务'
                    }
                    axios.get('/shop/listShop.do').then(r=>{
                        if(r.data.code!=200){
                            return
                        }
                        for(var i=0;i<r.data.response.shopList.length;i++){
                            _this.items.push(r.data.response.shopList[i])
                        }
                        // console.log("超管",_this.items)
                        _this.$store.state.TOPshop=[].concat(r.data.response.shopList)
                    })
                }else{
                    this.sysuser='您好,'+lockr.get('TOPshopName')+'店长'
                    this.items=[]
                    var str={}
                    str={
                        shopName:lockr.get('TOPshopName'),
                        shopId:lockr.get('TOPshopID')
                    }
                    this.items.push(str)
                    // console.log("店长",this.items)
                    this.form.region=this.items[0].shopId
                    axios.get('/shop/listShop.do').then(r=>{
                        if(r.data.code!=200){
                            return
                        }
                        _this.$store.state.TOPshop=[].concat(r.data.response.shopList)
                    })
                } 
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            goto(url){
                this.$router.push(url);//跳转
            },
            handleSelect(key, keyPath) {
                // console.log(key, keyPath);
            },
            out(){//退出登录,清除相关localStorage的内容,不能全清,重制状态
                lockr.rm('shiro');
                lockr.rm('TOPshopID')
                lockr.rm('TOPshopName')
                this.$store.state.shiro=false
                this.$store.state.TOPshopID=''
                this.$store.state.TOPshopName=''
                this.$store.state.TOPshop=[]
                this.$router.push('/Login');
            },
            saveshopid(i){//select选择时保存到vuex里
                this.$store.state.TOPshopID=i
                // console.log(this.$store.state.TOPshopID)
                //状态数据库保存商店ID或者折取ID
            }
        },
        beforeCreate(){//创建的时候出发权限系统,权限系统获取本地localStorage的createtime和shiro,然后通过enf函数进行对比
            var _this=this
            this.$store.commit('shirogetstate')//获取权限
            typeof(this.$store.state.shiro)=="undefined"?router.push('/Login'):null//如果是undefined就直接跳掉登录
            axios.get('qiniuToken.do').then(r=>{//后台管理系统获取权限,调到登录
                // console.log("indexcreated",r.data.response)
                if(r.data.message=="not login"&&r.data.code==500){
                    this.$message.error("访问者,请登录")
                    router.push('/Login');
                    return
                }
                _this.$store.state.qiniuToken=r.data.response.upToken//七牛云
            })
        }
    }
</script>
<style>
    @import url('index.css');

    .el-main{
        padding: 0;
    }

.el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
}
.el-dialog__header {
    padding: 10px;
    background-color: #20a0ff!important;
    color:#fff !important;
}
.el-dialog__title{
    color: #fff !important;
}
</style>
<style scoped>
.iconclass{
    color:#EFEFEF;
    margin:14px;
    background-color:rgb(61, 61, 61);
}
.iconclass:active{
    border:none;
}
</style>
